<template>
    <div>
      <a-button style="margin-bottom: 5px" class="editable-add-btn" @click="handleAdd">
        新增
      </a-button>
      <a-table bordered :data-source="dataSource" :columns="columns" :loading="loading" :pagination="false" :scroll="{ y: '400px' }" :fixed-header="true" >

        <template slot="operation" slot-scope="text, record">
          <a style="margin-right: 5px" @click="handleEdit(record)">编辑</a>
          <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
            <a>删除</a>
          </a-popconfirm>
        </template>
        <template slot="isKey-column" slot-scope="text, record">
          <a-tag v-if="record.isKey === 0" color="yellow">否</a-tag>
          <a-tag v-else-if="record.isKey === 1" color="green">是</a-tag>
        </template>
      </a-table>
      <div style="display: flex; justify-content: center; margin-top: 10px">
          <a-button style="margin-left: 8px" @click="prevStep">上一步</a-button>
          <a-button :loading="loading" type="primary" @click="nextStep">下一步</a-button>

        </div>
      <DatalibLogicActModal ref="modalForm" :tableInfo="addData" @ok="modalFormOk" />
    </div>

</template>

<script>
import { getDAListByTableId } from '@api/apiDatalib'
import DatalibLogicActModal from './LogicActModal/DatalibLogicActModal'
import { deleteAction } from '@api/manage'
  export default {
    components: {
      DatalibLogicActModal
    },
    name: "Step2",
    props: {
      addData: {
        type: Object, // 根据实际数据类型定义
        required: true, // 如果这个prop是必需的，可以设置为true
      },
    },
    data () {
      return {
        loading: false,
        url:{
          delete:"/dcloud-platform/api/datalibLogicAct/v1/delete"
        },

        columns: [
          {
            title: '字段编码',
            dataIndex: 'logicCode',
          },
          {
            title: '字段名称',
            dataIndex: 'logicName',
          },
          {
            title: '是否是key',
            dataIndex: 'isKey',
            scopedSlots: { customRender: 'isKey-column' },
          },
          {
            title: '字段类型',
            dataIndex: 'logicDataType'
          },
          {
            title: '长度',
            dataIndex: 'logicDataLength'
          },
          {
            title: '小数位数',
            dataIndex: 'logicDataDecimal'
          },
          {
            title: '操作',
            dataIndex: 'operation',
            scopedSlots: { customRender: 'operation' },
          },
        ],
        dataSource:[],
      }
    },
    mounted() {
      this.loadData()
    },
    methods: {
      nextStep () {
        let that = this
        that.loading = true
        setTimeout(function () {
          that.$emit('nextStep')
        }, 500)
      },
      prevStep () {
        this.$emit('prevStep')
      },
      loadData(){
        let param={"tableId":this.addData.id}
        getDAListByTableId(param).then((res) => {
          if(res.success){
            this.dataSource = res.result;
          }
        })
      },
      handleAdd: function () {
        this.$refs.modalForm.add();
        this.$refs.modalForm.title = "新增";
        this.$refs.modalForm.disableSubmit = false;
      },
      handleEdit: function (record) {
        this.$refs.modalForm.edit(record);
        this.$refs.modalForm.title = "编辑";
        this.$refs.modalForm.disableSubmit = false;
      },
      handleDelete: function (id) {
        if(!this.url.delete){
          this.$message.error("请设置url.delete属性!")
          return
        }
        var that = this;
        deleteAction(that.url.delete, {id: id}).then((res) => {
          if (res.success) {
            that.$message.success(res.message);
            that.loadData();
          } else {
            that.$message.warning(res.message);
          }
        });
      },
      modalFormOk(){
        this.loadData()
      }
    }
  };
</script>

<style lang="less" scoped>
  .stepFormText {
    margin-bottom: 24px;

    .ant-form-item-label,
    .ant-form-item-control {
      line-height: 22px;
    }
  }

</style>